<template>
    <div class="lk-box">
        <div v-if="titleType==='str'" class="title" v-text="title" />
        <ul v-else @click="e_select" class="title">
            <li v-for="(v, i) in title" :key="i"
                class="titles ilbk cur animation"
                :class="{active: selecti === i}"
                v-text="v.txt"
                :data-i="i"
                :data-v="v.value"
            />
        </ul>
        <div class="body">
            <slot />
        </div>
    </div>
</template>

<script>
export default {
    props: {
        title: {
            default: '标题'
        }
    },
    computed: {
        titleType() {
            let re = (typeof(this.title) === 'string') ? 'str' : 'list'
            return re
        }
    },
    data() {
        return {
            selecti: 0, // 选中了第几个
        }
    },
    created() {

    },
    methods: {
        e_select(event) {
            let t = event.target
            let di = t.dataset.i
            let dv = t.dataset.v
            if (di === undefined) {return false}
            this.selecti = Number(di)
            this.$emit('select', di, dv)
        }
    }
}
</script>

<style scoped>
    .lk-box {
        background-color: #181b2a;
    }
    .title {
        border-bottom: 2px solid #0f111a86;
        padding: 0 30px;
        line-height: 48px;
        font-size: 16px;
        font-weight: 400;
        color: var(--clr0);
        background-color: #1b1e2e;
    }
    .titles {
        padding-right: 30px;
    }
    .titles:hover {
        color: var(--clr1);
    }
    .active {
        color: var(--clr1);
    }
</style>